<template>
    <div id="Funnel" :style="{height:height}" :legendData="legendData"
         :seriesData="seriesData" :title="title" :max="max">
    </div>
</template>
<script>
    import {on, off} from './tools'

    // const xAxisData = ['2012', '2013', '2014', '2015', '2016'];
    // const seriesData = [
    //     {
    //         name: 'Forest',
    //         type: 'bar',
    //         data: [320, 332, 301, 334, 390]
    //     },
    //     {
    //         name: 'Steppe',
    //         type: 'bar',
    //         data: [220, 182, 191, 234, 290]
    //     },
    // ];
    // const legendData = ['Forest', 'Steppe'];

    export default {
        name: 'Bar',
        props: {
            height: {
                type: String,
                default: "254px"
            },
            seriesData: Array,
            legendData: Array,
            title: String,
            max: Number
        },
        data() {
            return {
                msg: '',
                chart: null,
                width: "100%",
                option: {
                    color: ["#84bafd",
                        "#6ad9e6",
                        "#ffb980",
                        "#59678c",
                        "#9a7fd1",
                        "#97b552",
                        "#588dd5",
                        "#fb6260"],
                    tooltip: {
                        trigger: 'item',

                    },
                    title: {
                        text: '',
                        subtext: '',
                        left: 'center',
                    },

                    legend: {
                        data: [],
                        left: 'right',
                    },

                    series: [
                        {
                            name: '漏斗图',
                            type: 'funnel',
                            left: '10%',
                            top: 60,
                            //x2: 80,
                            bottom: 60,
                            width: '80%',
                            // height: {totalHeight} - y - y2,
                            min: 0,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data: []
                        }
                    ]
                }
            }
        },
        mounted() {
            // this.$nextTick(() => {
            //     this.drawLine();
            //
            // })
        },
        beforeDestroy() {
            off(window, 'resize', this.resize)
        },
        methods: {
            resize() {
                this.chart.resize()
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('Funnel'))
                this.chart = myChart;
                // 绘制图表
                this.option.series[0].data = this.seriesData;
                this.option.series[0].max = this.max;
                this.option.legend.data = this.legendData;
                this.option.title.text = this.title;
                myChart.setOption(this.option);
                on(window, 'resize', this.resize)
            },

        }
    }

</script>
<style>
    #Bar div {
        width: 100%;
    }
</style>
